<template>
  <base-card>
    <v-carousel
      class="grey lighten-2 carouse-box"
      height="400"
      width="100%"
      cycle
      hide-delimiter-background
      :show-arrows="false"
      show-arrows-on-hover>
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.cover"
    >
      <v-row
        class="fill-height pa-3"
        align="start"
      >
        <v-col
          cols="12"
          md="7"
          offset-md="2"
          :class="item.style"
        >
          <h1 class="display-3 font-weight-light">
            {{item.title}}
          </h1>

          <div class="subheading text-uppercase pl-2 mb-4">
            {{item.Subtitle}}
          </div>

          <v-btn
            color="#9E9D24"
            depressed
            :href="item.path"
            large
          >
            更多
          </v-btn>
        </v-col>
      </v-row>
    </v-carousel-item>
  </v-carousel>
  </base-card>
</template>

<script>
  export default {
    name: 'HomeBanner',

    computed: {
    },
    created(){
      this.getBanners()
    },
    data(){
      return {
        items: [],
        paths: [
          '/says/5f6ce6b8b9d5121d808c3a9d',
          '/says/5f6cdf07b9d5121d808c3a9b',
          '/says'
        ]
      }
    },

    methods: {
      async getBanners(){
        const {data: res} = await this.$axios.$get('banners')
        this.items = res
        this.items.forEach((item, i) => {
          item.style = 'title'
          item.path = this.paths[i]
        });
        this.items[0].style = 'title banner-color'
        this.items[2].style = 'title banner-color'
      }
    }
  }
</script>

<style scoped>
.title:hover{
  color: #E65100;
  opacity:1;
}
.banner-color{
  color:#000;
}
.carouse-box:hover{
  color: red !important;
  opacity:0.7;
}
</style>

